<template>
	<view class="group-wrap">
	    <view class="wrap">
	    
	   <!-- <view class="group-name">
	        <text class="pd-10">群描述</text>
	        <view class="item-name">{{ groupDec }}</view>
	    </view> -->
	    <view class="group-member">
	        <!-- <text class="pd-10">群组成员</text> -->
			
	        <!-- <view v-for="(item, index) in groupMember" :key="index">
	            <view class="member-list">{{ item.member || item.owner }}</view>
	        </view> -->
			
			<!-- 证明头像 -->
			<view class='group-member-box ' >
				<view class='group-member-item' v-if="groupMemberNew.owner" :data-id="item.id" @tap="openCard" v-for='(item,index) in groupMemberNew.owner'>
						<image class='group-member-img' :src="item.avatar||'/static/allAvatar.png'"></image>
						<view class='group-member-desc'>{{item.nickName}}</view>
				</view>
				<view class='group-member-item' v-if="groupMemberNew.member && index < 28 && !isShowAllMember" :data-id="item.id" @tap="openCard" v-for='(item,index) in groupMemberNew.member'>
						<image class='group-member-img' :src="item.avatar||'/static/allAvatar.png'"></image>
						<view class='group-member-desc'>{{item.nickName}}</view>
				</view>
				<view class='group-member-item' v-if="groupMemberNew.member && isShowAllMember" :data-id="item.id" @tap="openCard" v-for='(item,index) in groupMemberNew.member'>
						<image class='group-member-img' :src="item.avatar||'/static/allAvatar.png'"></image>
						<view class='group-member-desc'>{{item.nickName}}</view>
				</view>
				<view class='group-member-item' @tap='bomWxShare'>
					<image class='group-member-img' style='border: 1px dashed #EEE;' src='/static/plus.png'></image>
				</view>
			</view>
			<view class='grou-member-btn' @tap="switchMemberBox" v-if='groupMemberNew.member.length > 28'>
				查看全部群成员
			</view>
			<!-- <view class="image-container">
			  
				
				<view wx:key='index' class="user-image-big" :style="'z-index:'+index+';'" v-if="groupMemberNew.owner" :data-id="item.id" @tap="openCard" v-for='(item,index) in groupMemberNew.owner'>
					<image :src="item.avatar||'/static/allAvatar.png'" ></image>
					<text>{{item.nickName}}</text> 
				</view>
				<view wx:key='index' class="user-image-big" :style="'z-index:'+index+';'" v-if="groupMemberNew.member" :data-id="item.id" @tap="openCard" v-for='(item,index) in groupMemberNew.member'>
					<image :src="item.avatar||'/static/allAvatar.png'" ></image>
					<text>{{item.nickName}}</text>
				</view>
				 
				<view wx:key='index' class="user-image-big-yq" @tap='bomWxShare'> 
					<image src='/static/plus.png'></image>
				</view>
			  </view> -->
	    </view>
		<view class='group-name-block'>
		<view class="group-name-box">
		    <view class="group-name-left">群组名称</view> 
			<view class='group-name-right'> 
				<text  v-if="!isOwner" >{{ groupName }}</text>
				<input @input="getGroupName" placeholder=" " placeholder-style="color:#CFCFCF;line-height:20px;font-size:12px;" :value="groupName" v-else></input>
				<image src='/static/r_arr.png' style='width:20upx;height:34upx;margin-left:20upx;'></image>
			</view>
		</view>
		
		<view class="group-name-box">
		    <view class="group-name-left">群简介</view> 
			
		</view>
		<view class="group-name-box">
		<view class='group-name-right' style="margin-left:0;">
			<textarea class='group-name-textarea' placeholder="群简介" placeholder-style="color:#CFCFCF;line-height:20px;font-size:24rpx;" :value="groupDec" name='desc' @input='getGroupDec' v-if="isOwner"></textarea>
			<textarea class='group-name-textarea' placeholder="群简介" placeholder-style="color:#CFCFCF;line-height:20px;font-size:24rpx;" :value="groupDec"  v-else></textarea>
		</view>
		</view>
		</view>
		<view class='group-name-block'>
		<view class="group-name-box">
		    <view class="group-name-left">我的名片</view> 
			<view class='group-name-right'>
				<view>{{currentName || "暂无"}}</view>
				<image src='/static/r_arr.png' style='width:20upx;height:34upx;margin-left:20upx;'></image>
			</view>
		</view>
		<view class="group-name-box" @tap="makePhoneCall">
		    <view class="group-name-left">投诉</view> 
			<view class='group-name-right' >
				<image src='/static/r_arr.png' style='width:20upx;height:34upx;'></image>
				
			</view>
		</view>
		</view>
		<!-- <view class="group-name"> 
		    <text class="group-name">群组名称</text> 
		    <text class="item-name" v-if="!isOwner" style='margin-left:auto'>{{ groupName }}</text>
			<input @input="getGroupName" placeholder=" " placeholder-style="color:#CFCFCF;line-height:20px;font-size:12px;" :value="groupName" v-else></input>
			
		</view> -->
		
	
			
		
	<!-- 	
		<view class="group-member">
		    <text class="pd-10">群简介</text>
		
			<view class="image-container">
					<view>
						<textarea placeholder="群简介" placeholder-style="color:#CFCFCF;line-height:20px;font-size:12px;" :value="groupDec" name='desc' @input='getGroupDec' v-if="isOwner"></textarea>
							
						
						<textarea placeholder="群简介" placeholder-style="color:#CFCFCF;line-height:20px;font-size:12px;" :value="groupDec"  v-else></textarea>
						
					</view>
			  </view>
		</view> -->
		

		
		
		
		
		
	    <!-- <view class="invite-member">
	        <text class="pd-10 invite-title">邀请群成员</text>
	        <view class="invite-wrap">
	            <input placeholder="用户名" @input="add_friend_name" placeholder-style="color:#CFCFCF;line-height:40px;font-size:14px;"/>
	            <button type="primary" @tap="addGroupMembers">邀请</button>
	        </view>
	    </view> -->
	    <!-- <view class="black-list border-bottom">
	        <text class="pd-5">群组黑名单</text>
	    </view> -->
	    <view class="bottom-wrap">
	  <!--  <view class="disband-group" v-if="isOwner">
	        <button type="warn" @tap="dissolveGroup">解散群组</button>
	    </view> -->
		
		<view class="disband-group mgb-group" v-if="isOwner">
		    <button  @tap="editGroup" class='groupList-exit-btn'>修改资料</button>
		</view>
		  
	    <view class="exit-group" v-if="!isOwner"> 
	        <button  @tap="leaveGroup" class='groupList-exit-btn'>退出群组</button>
	    </view>
	    </view>
	    </view>
	</view>
</template>

<script>
	import app from '../../App.vue';
	let disp = require("../../utils/broadcast");
	import {
		GYZJMODEL as gyzjModel
	} from '@/utils/gyzjModel.js'; 
	export default {
		data() {
			return {
				isShowAllMember:false,
				roomId: "",			// 群id
				groupName: "",		// 群名称
				currentName: "",	// 当前用户
				groupMember: [],	// 群成员
				groupMemberNew: [
					// {
					// 'avatar':'https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEIia40TkV9VCdPnRBXicpDcbDGDRVJBCiaSGEq5dngBfVVAE8wlpVRRG3HBx29jtN3m15ZCbqRBMQicIA/132',
					// 'name':'刘德华'
					// },
					// {
					// 'avatar':'https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEIia40TkV9VCdPnRBXicpDcbDGDRVJBCiaSGEq5dngBfVVAE8wlpVRRG3HBx29jtN3m15ZCbqRBMQicIA/132',
					// 'name':'刘德华'
					// },
					// {
					// 'avatar':'https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEIia40TkV9VCdPnRBXicpDcbDGDRVJBCiaSGEq5dngBfVVAE8wlpVRRG3HBx29jtN3m15ZCbqRBMQicIA/132',
					// 'name':'刘德华'
					// },
					// {
					// 'avatar':'https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEIia40TkV9VCdPnRBXicpDcbDGDRVJBCiaSGEq5dngBfVVAE8wlpVRRG3HBx29jtN3m15ZCbqRBMQicIA/132',
					// 'name':'刘德华'
					// },
					// {
					// 'avatar':'https://thirdwx.qlogo.cn/mmopen/vi_32/PiajxSqBRaEIia40TkV9VCdPnRBXicpDcbDGDRVJBCiaSGEq5dngBfVVAE8wlpVRRG3HBx29jtN3m15ZCbqRBMQicIA/132',
					// 'name':'刘德华'
					// },
					
				],	// 证明头像
				curOwner: "",		// 当前群管理员
				groupDec: "",		// 群描述
				addFriendName: [],
				isOwner: false,
				id:0,
				userInfo:[]
			}
		},
		onLoad(options) {
			let me = this;
			this.roomId = JSON.parse(options.groupInfo).roomId
			this.groupName = JSON.parse(options.groupInfo).groupName
			this.currentName = JSON.parse(options.groupInfo).myName
			this.id=options.id;
			
			disp.on("em.xmpp.group.leaveGroup", function(){
				var pageStack = getCurrentPages();
				// 判断是否当前路由是本页
				if(pageStack[pageStack.length - 1].route === me.route){
					me.getGroupMember();
					me.getGroupInfo();
				}
			});
			console.log(this.roomId, this.groupName, this.currentName);
			// 获取群成员
			this.getGroupMember();
			// 获取群信息
			this.getGroupInfo();
			/*获取用户信息*/
			// this.getUserInfo(token);
		},
		methods: {
			makePhoneCall(){
				uni.makePhoneCall({
				    phoneNumber: '13800013800' //仅为示例
				});
			},
			switchMemberBox(){
				this.isShowAllMember=!this.isShowAllMember;
			},
			getUserInfo: function (token) {
				var that=this;
			    gyzjModel.prototype.getUserInfo(token).then(data => {
				  /*用户第一次提交信息更新数据*/
			      that.userInfo = data.data.user;
			    })
			  },
			/*分享*/
			bomWxShare:function(){
				var arr=this.main_getGlobal();
				console.log('arr的值',arr);
				this.main_is_login(arr);
				
				var user=uni.getStorageSync('userInfo');
				var user_id=0;
				if(user){
					user_id=user.id
				}
				console.log('user',user);
				console.log('user_id',user.id);
				
				let wx_id=this.main_config_wx_id;
			
				let imageUrl='/static/allAvatar.png';
				
				let title=user.nickName+':邀请您加入 '+this.groupName;
				console.log(title); 
				let path='pages/groupChatView/groupChatView?id='+this.id+'&user_id='+user_id;
				// #ifdef APP-PLUS
				gyzjModel.prototype.shareLink(title,imageUrl,wx_id,path);
				// #endif
			},
			/*类型选择结束*/
			getGroupName(e){
				this.groupName = e.detail.value
			},
			/*修改资料*/
			editGroup:function(){
				let me = this;
				let allGroups = getApp().globalData.groupList;
				if(!this.groupName.trim()){
					uni.showModal({
						title: "",
						content: "请输入群名",
						confirmText: "OK",
						showCancel: false
					});
					return;
				}
				if(!this.groupDec.trim()){
					uni.showModal({
						title: "",
						content: "请传入群头像",
						confirmText: "OK",
						showCancel: false
					});
					return;
				}
				if(allGroups.reduce(function(result, v, k){
					return result || (v.name == me.groupName);
				}, false)){
					uni.showModal({
						title: "",
						content: "群名被占用",
						confirmText: "OK",
						showCancel: false
					});
					return;
				}
				/*重新组装自己的数据*/
				var arr=this.main_getGlobal();
				this.main_is_login(arr);
				if(arr.token=='0739'){
					return false;
				}
				let options= {
					groupname: this.groupName,
					desc: this.groupDec,
				}
				gyzjModel.prototype.PostEditGroups(arr.token,arr.type,options,this.id).then(res_groups=>{
					console.log('PostEditGroups修改群成功res的值',res_groups); 
					if(res_groups.code==1){
						uni.showToast({
							title: "修改成功",
							duration: 2000,
							success: function(res_uni){
								uni.switchTab({ 
									// url: "../groups/groups",
									url: "/pages/groups/groups",
								});
							},
						});
					}else{
						console.log('修改群失败!');
						this.$helper.toast('none', err.data.error_description, 2000, false, 'bottom');
					}
				});
			},
			/*群描述*/
			getGroupDec(e){
				this.groupDec = e.detail.value
			},
		//分享打开自己的名片
			openCard: function(event) {
				var id=event.currentTarget.dataset.id;
				console.log('id的值',id);  
				uni.navigateTo({
				  url: '../user-center/my-info/cardcase/cardcase?id='+id, 
				});
			},
			getGroupMember(){
				var me = this;
				// 获取群成员
				var pageNum = 1,
					pageSize = 1000,groupMemberOld=[],groupMemberNew=[],gyzjMemberOld_string='';
				var options = {
					pageNum: pageNum,
					pageSize: pageSize,
					groupId: this.roomId,
					success: function(resp){
						if(resp && resp.data && resp.data.data){
							/*设置新的头像*/  
							var groupMemberOld=resp.data.data;
							uni.setNavigationBarTitle({
								title:'聊天成员('+groupMemberOld.length+')'
							})
							me.groupMember = groupMemberOld;
							var data={
								'all_info':JSON.stringify(groupMemberOld)
							}    
							gyzjModel.prototype.getSettingAllavatar(me.id,data).then(result => {
								me.groupMemberNew=result.data;
							})
							
						}
					},
					error: function(err){
			
					}
				};
				this.$im.conn.listGroupMember(options);
			},
			
			getGroupInfo(){
				var me = this;
				// 获取群信息
				var options = {
					groupId: this.roomId,
					success: function(resp){
						if(resp && resp.data && resp.data.data){
							me.curOwner = resp.data.data[0].owner
							me.groupDec = resp.data.data[0].description
			
							if(me.currentName == resp.data.data[0].owner){
								me.isOwner = true
							}
						}
					},
					error: function(){
			
					}
				};
				this.$im.conn.getGroupInfo(options);
			},
			
			add_friend_name(e){
				var firendArr = [];
				firendArr.push(e.detail.value);
				this.addFriendName = firendArr
			},
			
			// 加好友入群
			addGroupMembers(){
				var me = this;
				var option = {
					list: this.addFriendName,
					roomId: this.roomId,
					success: function(){
						if(me.isExistGroup(me.addFriendName, me.groupMember)){
							uni.showToast({
								title: "已在群中",
								duration: 2000,
							});
						}
						else{
							uni.showToast({
								title: "邀请已发出",
								duration: 2000,
							});
						}
						
						me.getGroupMember();
					},
					error: function(err){
						uni.showToast({
							title: err.data.error_description,
						});
					}
				};
				this.$im.conn.addGroupMembers(option);
			},
			
			isExistGroup(name, list){
				for(let index = 0; index < list.length; index++){
					if(name == list[index].member || name == list[index].owner){
						return true
					}
				}
				return false
			},
			
			leaveGroup(){
				var me = this;
				this.$im.conn.leaveGroupBySelf({
					to: this.currentName,
					roomId: this.roomId,
					success: function(){
						uni.showToast({
							title: "已退",
							duration: 2000,
							success: function(res){
								// redirectTo = 此操作不可返回
								setTimeout(() => uni.navigateBack({
									url: "../groups/groups?myName=" + me.currentName
								}), 2000);
							},
						});
						disp.fire("em.xmpp.invite.deleteGroup");//退群
					},
					error: function(err){
						uni.showToast({
							title: err.data.error_description,
						});
					}
				});
			},
			
			dissolveGroup(){
				var me = this;
				// 解散一个群组
				this.$im.conn.dissolveGroup({
					groupId: this.roomId,
					success: function(){
						uni.showToast({
							title: "已解散",
							duration: 2000,
							success: function(res){
								// redirectTo = 此操作不可返回
								setTimeout(() => uni.navigateBack({
									url: "../groups/groups?myName=" + me.currentName
								}), 2000);
							},
						});
					},
					error: function(err){
						uni.showToast({
							title: err.data.error_description,
						});
					},
				});
			}
		}
	}
</script>

<style>
.group-wrap{
	/* height: 100%; */
	/* background-color: #CFCFCF; */
}
.wrap{
	border-radius:3px;
	/* background: #fff;
	height:100%; */
}
.border-bottom{
	border-bottom: 1px solid #e1e1e1;
}
.pd-10{
	padding-left:10px;
}
text{
	font-size: 14px;
}
.group-name{
	width: 100%;
	padding:20upx 0;
    /* line-height: 40px; */
    border-top: 10upx solid #EFEFEF;
	display:flex;
	align-items:center;
}
.group-name input{
	margin-left:30rpx;
	width:500rpx;
}
.group-name .item-name{
	float: right;
	margin-right:10px;
	color: #ccc;
	font-size: 14px;
}
.invite-member,.group-member{
    /* border-top: 1px solid #cfcfcf; */
}

.group-member .member-list{
	padding-left: 10px;
	font-size: 14px;
	height: 30px;
	line-height: 30px;
	color: #ccc;
}
.invite-member .invite-wrap input{
    display:inline-block;
    width: calc(100% - 80px);
    height:40px;
    line-height:40px;
    font-size:14px;
    border:1px solid #e1e1e1;
    border-radius:4px;
    padding: 0 8px;
    box-sizing: border-box;
}
.invite-wrap{
    padding: 0 10px 0 10px;
    box-sizing: border-box;
    margin-bottom:6px;
}
.invite-member .invite-wrap button{
    float:right;
    width: 70px;
    height:40px;
    line-height:40px;
    font-size:14px;
}
.invite-title{
	display: block;
	height: 35px;
	line-height: 35px;
}
.black-list{
	height: 40px;
	line-height: 40px;
}
.disband-group{
	/* padding:0 8px; */
	/* height: 40px;
	line-height: 40px; */
}
.exit-group{
	/* padding:0 8px; */
}
.bottom-wrap{
	/* position:fixed; */
	/* bottom:10px; */
	width:100%;
	margin-top: 40upx;
	/* z-index: 2; */
}
/*用户头像样式*/
.image-container {
  /* display: flex; */
  align-items: center;
  position: relative;
  /* height: 173rpx; */
  /* height: 83px; */
  overflow:hidden;
  padding:15px 12px;
  display: flex;
  flex-wrap:wrap;
}
.image-num {
  font-size: 22px;
  color: #787878;
  /* position: absolute; */
  white-space: nowrap;
}
.user-image-big-yq{
	margin-top:-50rpx;
}
.user-image-big,.user-image-big-yq {
  position: relative;
  /* width: 45px;
  height: 45px; */
  border-radius: 5px;
  margin-right:14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
  margin-bottom:18px;
}
.user-image-big image,.user-image-big-yq image{ 
	width: 48px;
	height: 48px;
}
.user-image-big text{ 
	width:48px;
	 overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
	 margin-top: 3px;
	 text-align: center;

}
.user-image-big:nth-of-type(5n){
  margin-right:0px;
}

.detail-share {
  width: 160px;
  height: 50px;
  background: rgba(238, 238, 238, 1);
  border-radius: 25px 0 0 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}
.text-container{
  height:50px;
  width:80%;
  display:flex;
  margin-bottom:20px;
}
.juli-magl{
  margin-left:30px;
}
.mgb-group{
	margin-bottom:30rpx;
}


/*----------------新样式-------------*/
.group-member-box{
	display: flex;
	padding:40upx;
	padding-bottom: 0;
	flex-wrap: wrap;
	color:rgba(0,0,0,.7);
	background: white;
	/* height: 840upx; */
	
	
}
.overflow-hidden{
	height:800upx;
	overflow: hidden;
}
.group-member-item{ 
	flex:0 0 100upx;
	margin-right:40upx;
	margin-bottom:40upx;
	font-size: 26upx;
}
.group-member-item:nth-child(5n){
	margin-right: 0;
}
.group-member-img{
	width:100upx;
	height:100upx;
	border-radius: 6px;
}
.group-member-desc{
	/* margin-top:10upx; */
	width: 100upx;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.group-name-block{
	border-top: 10upx solid #EFEFEF;
}
.group-name-box{
	display: flex;
	background: white;
	padding:20upx 20upx;
	align-items: center;
	font-size: 32upx;
	/* align-items: center; */
	border-bottom: 1px solid #EFEFEF;
}
.group-name-left{
	/* text-align: right; */
	width:150upx;
	flex:0 0 150upx;
	/* color:rgba(0,0,0,.8); */
}
.group-name-right{
	margin-left:auto;
	/* flex:1; */
	display: flex;
	align-items: center;
	color:rgba(0,0,0,.6);
}
.group-name-textarea{
	width:calc(100vw - 40upx);
}
.groupList-join-btn{
	width:90%;
	/* padding: 0; */
	padding:10upx 0;
	color:white;
	border-radius: 6px;
	text-align: center;
	margin:0;
	font-size: 36upx;
	line-height: 70upx;
	color:white; 
	background-color:#f94c48;
	margin: 30upx auto;
	
}
.groupList-exit-btn{
	width:100%;
	padding:10upx 0;
	color:white;
	text-align: center;
	margin:0;
	border-radius:0;
	font-size: 36upx;
	line-height: 70upx;
	background-color:white;  
	color:#f94c48;
	margin: 30upx auto;
}
button.normal-btn::after {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

button.normal-btn {
  background-color: transparent !important;
  padding: 0 !important;
  line-height: inherit !important;
  margin: 0 !important;
  /* width: auto !important; */ 
  font-weight: 500 !important;
  border-radius: none !important;
  text-align: right;
  width:200upx;
  font-size: 32upx; 
}
.grou-member-btn{
	text-align: center;
	color:#999;
	padding:30upx;
	background: white;
	font-size: 32upx;
}
</style>
